Skip to content
Nano Kit

Getting Started

@nano_kit/store is a lightweight state management library inspired by Nano Stores and built around a push-pull based reactivity system.

  • Tiny. ~2 kB (minified & brotlied). Zero dependencies.
  • Fast. Optimized for performance using the push-pull algorithm.
  • Tree-Shakeable. Only the methods you import end up in your bundle.
  • TypeScript. First-class type support out of the box.

Installation

Section titled “Installation”

Install the package using your favorite package manager:

pnpm add @nano_kit/store

Quick Start

Section titled “Quick Start”

Here is a minimal example demonstrating signals, computed values, and effects in action:

import { signal, onMount, computed, effect } from '@nano_kit/store'


/* Create independent atomic stores */
const $count = signal(1)


/* Mountable: Run logic only when store has listeners */
onMount($count, () => {
  console.log('Mounted: Store is active')
  /* e.g., open websocket, start timer, etc. */


  return () => {
    console.log('Unmounted: Store is idle')
    /* e.g., close websocket, stop timer */
  }
})


/* Derive state (computed values are lazy & cached) */
const $double = computed(() => $count() * 2)


/* React to changes (triggers onMount) */
const unsub = effect(() => {
  console.log(`Count: ${$count()}, Double: ${$double()}`)
})


/* Update triggers granular propagation */
$count(2)


/* Cleanup: removes listener and triggers onMount destructor */
unsub()

Next Steps

Section titled “Next Steps”

Now that you have the basics, explore the core concepts or connect to your framework: